<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-05-04 10:56:18
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-05-04 11:08:58
 * @FilePath: \mould\src\views\test\zl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">
        <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" border show-summary>
            <template v-for="item in tableConfig">
                <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" />
                <el-table-column v-else :key="item.id + 1" :label="item.label" :prop="item.prop" />
            </template>
        </el-table>
    </div>
</template>
<script>

import TableColumn from '@/components/uu';

export default {
    // 定义页面数据
    components: { TableColumn },
    data() {
        return {
            // 表数据
            tableData: [
                { parkName: "aaa", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "aaa", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "aaa", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "aaa", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "aaa", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "aaa", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "bbb", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "bbb", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "bbb", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "bbb", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "bbb", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "cccc", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 },
                { parkName: "cccc", date: '2023-05-04', count0: 50, money0: 60, count1: 80, money1: 90 }
            ],
            // 表头数据
            tableConfig: [
                {
                    "id": 2,
                    "label": "停车场名称",
                    "prop": "parkName",
                    "children": null
                },
                {
                    "id": 85,
                    "label": "日期",
                    "prop": "date",
                    "children": null
                },
                {
                    "id": 0,
                    "label": "微信支付",
                    "prop": "0",
                    "children": [
                        {
                            "id": 12,
                            "label": "交易笔数",
                            "prop": "count0",
                            "children": null
                        },
                        {
                            "id": 89,
                            "label": "交易金额",
                            "prop": "money0",
                            "children": null
                        }
                    ]
                },
                {
                    "id": 1,
                    "label": "支付宝支付",
                    "prop": "1",
                    "children": [
                        {
                            "id": 40,
                            "label": "交易笔数",
                            "prop": "count1",
                            "children": null
                        },
                        {
                            "id": 61,
                            "label": "交易金额",
                            "prop": "money1",
                            "children": null
                        }
                    ]
                }
            ],

        }
    },
    // 勾子
    created() {
        this.initTable()
    },
    // 方法
    methods: {
        filterData(arr) {
            const spanOneArr = []
            let concatOne = 0
            arr.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                } else {
                    if (item.parkName === arr[index - 1].parkName) { // 第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1 // 跨行数+1
                        spanOneArr.push(0) // 数组后边补0
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }
                }
            })
            return {
                one: spanOneArr
            }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log(row, column, rowIndex, columnIndex);
            if (column.property == 'parkName') {


                // if (columnIndex === 0) {
                // this.tableData  修改
                // [7, 0, 0, 0, 0, 0, 0]
                const _row = (this.filterData(this.tableData).one)[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
                // }
            }
        },

        // 初始化表格数据
        initTable() {
            //向后端请求表头数据、表格数据
        },
    }
}
</script>
